<template>
	<view class="container">
		<view class="info">
			<view class="label">
				<view class="name">通知类型</view>
				<view class="value">{{ detail.notice_cat_name }}</view>
			</view>
			<view class="label">
				<view class="name">浏览次数</view>
				<view class="value">{{ detail.view_number }}</view>
			</view>
			<view class="label">
				<view class="name">发送时间</view>
				<view class="value">{{ detail.publish_time_format }}</view>
			</view>
		</view>
		<view class="info">
			<view class="content">
				<view class="name">{{ detail.notice_title }}</view>
				<view class="value">{{ detail.notice_content }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import api from '@/api/api';
export default {
	data() {
		return {
			id: null,
			detail: {}
		};
	},
	onLoad(e) {
		this.id = e.id;
	},
	onShow() {
		this.getDetail();
	},
	methods: {
		getDetail() {
			api.noticeDetail({ id: this.id }).then((res) => {
				this.detail = res.data.info;
			});
		}
	}
};
</script>

<style lang="scss">
.container {
	padding: 20rpx;
	.info {
		background: #fff;
		margin-bottom: 20rpx;
		padding: 10rpx 20rpx;
		.label {
			padding: 20rpx 0;
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid $uni-border-3;
			&:last-child {
				border-bottom: none;
			}
			.name {
				font-size: 30rpx;
				color: #000;
			}
			.value {
				font-size: 30rpx;
				color: $uni-secondary-color;
			}
		}
		.content {
			padding: 20rpx 0;
			.name {
				font-size: 30rpx;
				font-weight: bold;
				color: #000;
				margin-bottom: 20rpx;
			}
			.value {
				min-height: 600rpx;
				font-size: 30rpx;
				line-height: 1.6;
				color: $uni-secondary-color;
			}
		}
	}
}
</style>
